<template>
  <div class="toolbar">
    <!-- 使用按钮组 -->
    <el-row>
      <el-button-group style="margin-bottom:20px">
        <el-dropdown trigger="click" @command="baseMapChange">
          <el-button size="small" type="primary" icon="el-icon-s-grid"
            >底图<i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-s-grid" command="1">矢量底图</el-dropdown-item>
            <el-dropdown-item icon="el-icon-picture" command="2">影像底图</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown trigger="click" @command="draw">
          <el-button size="small" type="primary" icon="el-icon-s-grid"
            >标绘<i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-s-grid" command="1">点</el-dropdown-item>
            <el-dropdown-item icon="el-icon-picture" command="2">线</el-dropdown-item>
            <el-dropdown-item icon="el-icon-picture" command="2">面</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="showLayerList('showLayerList')">图层</el-button>
        <el-button size="small" type="primary" icon="el-icon-edit"  @click="showLegend('showLegend')">图例</el-button>
        <el-button size="small" type="primary" icon="el-icon-delete"  @click="showScale('showScale')">比例尺</el-button>
      </el-button-group>      
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ToolBar",
  methods: {
    // 开启测量
    measurement(type) {
      this.$emit("measurement", type);
    },
    // 底图切换
    baseMapChange(command) {
      console.log("toolbar===" + command);
      this.$emit("baseMapChange", command);
    },
    // 标绘
    draw(type) {
      this.$emit("draw", type);
    },
    // 显示图例
    showLegend(command) {
      this.$emit("showLegend",command);
    },
    // 显示图层
    showLayerList(command) {
      this.$emit("showLayerList",command);
    },
    // 比例尺
    showScale(command) {
      this.$emit("showScale",command);
    }
  }
};
</script>

<style lang="less">
.toolbar {
  position: absolute;
  top: 1px;
  right: 40px;
  height: 40px;
  width: auto;
  z-index: 99;
}
.el-dropdown {
  vertical-align: top;
  //margin-left: 15px;
}
</style>
